

Vue.component('my-component',{
    props:['message'],
    template:'<div>父组件的信息:{{message}} <button @click="counter++">结果 {{counter}}</button></div> ',
    data:function (){
        return {
            counter:0,
        }
    }

});
Vue.component('component_message',{
    template: '<div>' +
        '<button @click="handleIncrease">+1</button>' +
        '<button @click="handleReduce">-1</button>'+
        '</div>',
    data:function (){
        return {
            messageCounter:0
        }
    },
    methods: {
        handleIncrease:function (){
            this.messageCounter++
            this.$emit("increase",this.messageCounter)
        },
        handleReduce:function (){
            this.messageCounter--
            this.$emit("reduce",this.messageCounter)
        }
    }
});




new Vue({
    el: '#app',
    data: {
        list: [
            {id: 0, name: 'phone', price: 6199, count: 1},
            {id: 1, name: 'pad', price: 4188, count: 1},
            {id: 2, name: 'pc', price: 8177, count: 1}
        ],
        inputMessage:"",
        picked:true,
        pickedItem:'js',
        pickedItems:['js','html'],
        selected:['css','js'],
        bindPicked:false,
        bindValue:'123',
        trueValue:'trueValue',
        falseValue:'falseValue',
        component_total:0,
        currentDynamicComponent:'comA',
        showTextNextTick:false
    },
    computed: {
        totalPrice: function () {
            let total = 0;

            for (let i = 0; i < this.list.length; i++) {
                const item = this.list[i];
                total = total + item.price * item.count;
            }

            return total;
        }
    },
    components:{
        comA:{
            template:'<div>组件A</div>'
        },
        comB:{
            template:'<div>组件B</div>'
        },
        comC:{
            template:'<div>组件C</div>'
        },
    },

    methods: {
        handleRemove: function (index) {
            this.list.splice(index, 1);
            console.log("handleRemove")
        },
        handleReduce: function (index) {
            console.log("handleReduce")
            if (this.list[index].count === 1) {
                return;
            }
            this.list[index].count--;

        },
        handleAdd: function (index) {
            console.log("handleAdd")
            this.list[index].count++;
        },
        handleMessageTotal:function (total){
            this.component_total = total
        },
        handleChangeComponent:function (view){
            this.currentDynamicComponent = view;
        },
        getText:function (){
            this.showTextNextTick = true
            //这么写会报错
            // let text = document.getElementById('testNextTick').innerHTML
            //需要这么写
            this.$nextTick(function (){
                let text = document.getElementById('testNextTick').innerHTML
                console.log(text)
            })

        }
    }
})